<!-- filepath: d:\code\fuwuwaibaoproject\Service-Outsourcing-Competition-Project\front\intelligent-learning-platform\src\views\home\file\File.vue -->
<template>
  <div class="file-container">
    <div class="files-wrapper">

      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(name,index) in nameList" :key="name">
          <template v-if="name === '我的文件' && index == 0">
            <el-icon><Folder /></el-icon>
          </template>
          <template v-if="name === '共享文件' && index == 0">
            <el-icon><FolderOpened /></el-icon>
          </template>
          <template v-if="name === '错题文件' && index == 0">
            <el-icon><FolderDelete /></el-icon>
          </template>
          <template v-if="name === '回收站' && index == 0">
            <el-icon><DeleteFilled /></el-icon>
          </template>
          {{ name }}
        </el-breadcrumb-item>
      </el-breadcrumb>

      <div class="files">
        <div class="file" v-if="fileList.length > 1">
          <img src="@/assets/file/file.png" alt="" class="file-icon" @click="goBack()">
          <div class="file-name">...</div>
        </div>
        <div class="file" v-for="file in files" :key="file.id">
          <el-dropdown trigger="click">
            <img
              :src="fileType[Number(file.type)][Number(file.isOpen) || 0][Number(file.isShare) || 0]"
              alt=""
              class="file-icon"
            >
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="file.type == 2" @click="goToFile(file)">进入</el-dropdown-item>
                <el-dropdown-item v-if="file.type == 1 && props.mode != 4" @click="preview(file.id)">预览</el-dropdown-item>
                <el-dropdown-item v-if="file.type == 1 && props.mode != 4" @click="preview(file.id)">下载</el-dropdown-item>
                <el-dropdown-item @click="remove(file)" v-if="props.mode != 2">删除</el-dropdown-item>
                <el-dropdown-item v-if="file.type == 2 && props.mode == 1"  @click="onRename(file.id)">重命名</el-dropdown-item>
                <el-dropdown-item @click="onUpdateAuth(file)" v-if="props.mode == 1">修改权限</el-dropdown-item>
                <el-dropdown-item @click="findFile(file)" v-if="props.mode == 4">找回文件</el-dropdown-item>
                <el-dropdown-item @click="onShowAiAnalyze(file)" v-if="props.mode == 3 && file.type == 1">ai分析</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="file.folderName || file.fileName || file.name"
            placement="top-start"
          >
            <div class="file-name">
              {{ file.folderName || file.fileName || file.name }}
            </div>
          </el-tooltip>
        </div>
      </div>

      <el-dialog title="AI分析" v-model="showAiAnalyze" custom-class="ai-analyze-dialog">
        <span>
          <el-input
            type="textarea"
            v-model="analyzeKeyWord"
            placeholder="请输入需要分析的内容"
            rows="6"
            class="ai-analyze-input"
          ></el-input>
          <el-button type="primary" @click="analyze" class="ai-analyze-btn" :disabled="loading">
            分析
          </el-button>
          <div
            class="ai-analyze-output"
            v-if="resultHtml"
            v-html="resultHtml"
          ></div>
          <!-- 当处于加载状态时，显示加载动画 -->
          <div v-else-if="loading" class="ai-analyze-loading">
            <el-icon><Loading /></el-icon>
            <div class="loading-text">请稍候...</div>
          </div>
          <!-- 如果既没有分析结果也不再加载，则显示空状态 -->
          <div v-else class="ai-analyze-empty">
            请输入内容后点击“分析”
          </div>
        </span>
        <template #footer>
          <span>
            <el-button type="primary" @click="showAiAnalyze = false" style="background-color: #9f632c;">退出</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog title="修改文件权限" v-model="showUpdateAuth">
        <span>
          <el-form :model="updateAuthForm" label-width="100px" size="normal">
            <el-form-item label="权限" size="normal">
              <el-select v-model="authParam" placeholder="Select" style="width: 240px">
                <el-option
                  v-for="(item,index) in auths[currentFile.type]"
                  :key="index"
                  :label="item"
                  :value="index"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="是否共享" size="normal">
              <el-checkbox v-model="isShare" label="共享" size="large" border @change="changShareStatus"/>
            </el-form-item>
            <el-form-item label="共享用户" size="normal" v-if="isShare">
              <div style="margin-bottom: 8px;">
                <el-button type="primary" size="small" @click="showAddSharedUser = true">添加用户</el-button>
              </div>
              <div class="shared-users-list">
                <el-tag
                  v-for="user in shareUser"
                  :key="user.id"
                  closable
                  @close="removeSharedUser(user)"
                  style="margin-right: 4px; margin-bottom: 4px;"
                >
                  {{ user.username }}
                </el-tag>
              </div>
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span>
            <el-button type="primary" @click="confirmAuth">确认</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        title="添加共享用户"
        v-model="showAddSharedUser"
      >
        <span>
          <div style="display: flex; margin-bottom: 10px;">
            <el-input v-model="searchKeyword" placeholder="请输入用户名" style="flex:1;" />
            <el-button type="primary" @click="searchUser" style="margin-left:10px;">搜索</el-button>
          </div>
          <div v-if="searchRes.length">
            <el-card v-for="user in searchRes" :key="user.id" style="margin-bottom: 5px;">
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span>{{ user.username }}</span>
                <el-button size="mini" type="success" @click="addUserFromSearch(user)">添加</el-button>
              </div>
            </el-card>
          </div>
          <div v-else>
            <p>暂无搜索结果</p>
          </div>
        </span>
        <template #footer>
          <span>
            <el-button @click="showAddSharedUser = false">退出</el-button>
          </span>
        </template>
      </el-dialog>
      

      <el-dialog title="重命名文件夹" v-model="showRenameDir">
        <span>
          <el-form :model="renameDirform" label-width="100px" size="normal">
            <el-form-item label="文件夹名称" size="normal">
              <el-input v-model="renameDirform.name" placeholder="请输入文件夹名称"  clearable />
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span>
            <el-button @click="showRenameDir = false">取消</el-button>
            <el-button type="primary" @click="confirmRenameDir">确认</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dropdown v-if="props.mode == 1 || props.mode == 4 || props.mode == 3">
        <img src="@/assets/file/plus.png" class="add">
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="showAddDir = true" v-if="props.mode == 1 || props.mode == 3">新建文件夹</el-dropdown-item>
            <el-dropdown-item @click="showAddFile = true" v-if="props.mode == 1 || props.mode == 3">新建文件</el-dropdown-item>
            <el-dropdown-item v-if="props.mode == 4" @click="clearRecycle">清空回收站</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-dialog title="添加文件" v-model="showAddFile">
        <span>
          <el-upload
            ref="upload"
            :limit="1"
            :before-upload="handleBeforeUpload"
            :on-exceed="handleExceed"
            :auto-upload="false"
            v-model:file-list="uploadFiles"
          >
            <template #trigger>
              <el-button type="primary">上传文件</el-button>
            </template>
          </el-upload>
        </span>
        <template #footer>
          <span>
            <el-button @click="showAddFile = false">取消</el-button>
            <el-button type="primary" @click="confirmAddFile" :disabled="addDirDisabled">确认</el-button>
          </span>
        </template>
      </el-dialog>
      
      <el-dialog title="添加文件夹" v-model="showAddDir">
        <span>
          <el-form :model="addDirform" label-width="100px" size="normal">
            <el-form-item label="文件夹名称" size="normal">
              <el-input v-model="addDirform.folderName" placeholder="请输入文件夹名称"  clearable />
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span>
            <el-button @click="showAddDir = false">取消</el-button>
            <el-button type="primary" @click="confirmAddDir">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <div class="user-wrapper">
      <img :src="avatar" class="avatar" @click="router.push('/user/' + userId)">
      <el-tooltip class="box-item" effect="dark" :content="username" placement="top-start">
        <div class="username">{{ username }}</div>
      </el-tooltip>
      <div class="phone">{{ phone }}</div>
      <div class="information">{{ staticData.openFileView }}访问 {{ staticData.totalLike }}点赞 {{ staticData.openFilePreview }}预览 {{ staticData.openFileDownload }}下载</div>
    </div>
  </div>
</template>

<script setup>
import { getFile, getRootId, addFile, authFile, authFolder, shareFile, fileShareUser, fileShareAddUser, fileShareRemove, fileMistakeFolder, fileMistake, fileMistakePreview, fileShare, fileMistakeFile, fileMistakeFileRemove, fileMistakeFolderRemove, fileSharePreview, fileRecycle, fileRecycleRemove, fileRecycleClear, fileRecycleFind, fileMistakeFolderCreate, aiAnalyze, ChangeshareFile } from '@/api/FileApi'
import { getUserInfo, userSelectPhone, userStatistic } from '@/api/UserApi'
import { ArrowRight,Loading,Folder,FolderOpened,FolderDelete,DeleteFilled } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
import { ElMessage, genFileId } from 'element-plus'
import img1 from '@/assets/file/1.png'
import img2 from '@/assets/file/2.png'
import img3 from '@/assets/file/3.png'
import privateImg from '@/assets/file/private.png'
import shareImg from '@/assets/file/share.png'
import fileImg from '@/assets/file/file.png'
import publicImg from '@/assets/file/public.png'
import { addDirectory, downloadFile, previewFile, removeFile, removeFolder, renameFolder } from '../../../api/FileApi'
import { useRouter } from 'vue-router'
import { marked } from 'marked'

const fileType = [
  [],
  [
    [img1, img2],
    [img3, img3],
    [img3, img3]
  ],
  [
    [privateImg, shareImg],
    [fileImg, publicImg],
    [fileImg, publicImg]
  ]
]

const username = ref()
const phone = ref()
const avatar = ref()

const props = defineProps({
  mode: {
    type: Number,
    default: 1
  }
})

const currentId = ref()
const fileList = ref([])
const nameList = ref([])
const files = ref()

const staticData = ref({
  openFileView: 0,
  totalLike: 0,
  openFilePreview: 0,
  openFileDownload: 0
})
const userId = ref()
onMounted(async () => {
  const res = await getUserInfo()
  username.value = res.data.data.username
  phone.value = res.data.data.phone
  avatar.value = res.data.data.img
  userId.value = res.data.data.id
  staticData.value = (await userStatistic()).data.data
})

watch(() => props.mode, async (newVal) => {
  files.value = []
  fileList.value = []
  nameList.value = []
  if(newVal == 1){
    currentId.value = (await getRootId()).data.data
    files.value = (await getFile(currentId.value)).data.data
    nameList.value.push("我的文件")
  }
  if(newVal == 2){
    currentId.value = -1
    files.value = (await shareFile()).data.data
    nameList.value.push("共享文件")
  }
  if(newVal == 3){
    currentId.value = -2
    files.value = (await fileMistakeFolder()).data.data
    nameList.value.push('错题文件')
  }
  if(newVal == 4){
    currentId.value = -3
    files.value = (await fileRecycle()).data.data
    nameList.value.push('回收站')
  }
  fileList.value.push(currentId.value)
}, { immediate: true })

const showAddFile = ref(false)
// 定义一个变量来存储上传组件的文件列表
const uploadFiles = ref([])
// ref 用于获取组件实例（可选）
const upload = ref(null)

const handleBeforeUpload = (file) => {
  if(uploadFiles.value.length > 0){
    // 清空已上传文件列表
    uploadFiles.value = []
  }
  return true
}

const handleExceed = (filesArray) => {
  uploadFiles.value = []  // 清空列表
  let file = filesArray[0]
  file.uid = genFileId()
  // 调用上传组件的方法以开始上传（仅作为示例，实际根据组件文档调整）
  upload.value.handleStart && upload.value.handleStart(file)
}

const getFileCategory = (fileName) => {
  const ext = fileName.split('.').pop().toLowerCase();
  if (['pdf', 'doc', 'docx', 'txt', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
    return 1; // 文档
  } else if (['mp4', 'avi', 'mkv', 'mov'].includes(ext)) {
    return 2; // 视频
  } else if (['mp3', 'wav', 'ogg'].includes(ext)) {
    return 3; // 音频
  } else {
    return 4; // 其他
  }
};

const confirmAddFile = async () => {
  if(uploadFiles.value && uploadFiles.value.length > 0){
    if(currentId.value < 0){
      ElMessage.error('不允许在这里上传文件')
      return
    }
    let path = ''
    for(let i = 1; i < fileList.value.length; i++){
      path += '/' + fileList.value[i]
    }
    const file = uploadFiles.value[0].raw
    
    if(props.mode == 1){
      const res = await addFile(file, currentId.value)
    }
    if(props.mode == 3){
      const res = await fileMistakeFile(file,currentId.value)
    }

    ElMessage({
      message: '上传文件成功',
      type: 'success'
    })
    showAddFile.value = false
    // 清空上传文件列表
    uploadFiles.value = []
    getAllFile()
  } else {
    ElMessage({
      message: '请上传文件',
      type: 'error'
    })
  }
}

const showAddDir = ref(false)
const addDirform = ref({
  folderName: ''
})

const getAllFile = async () => {
  if(props.mode == 1){
    files.value = (await getFile(currentId.value)).data.data
  }
  if(props.mode == 2){
    if(currentId.value > 0){
      files.value = (await fileShare(currentId.value)).data.data
    }else{
      files.value = (await shareFile()).data.data
    }
  }
  if(props.mode == 3){
    if(currentId.value > 0){
      files.value = (await fileMistake(currentId.value)).data.data
    }else{
      files.value = (await fileMistakeFolder()).data.data
    }
  }
  if(props.mode == 4){
    files.value = (await fileRecycle()).data.data
  }
}

const addDirDisabled = ref(false)
const confirmAddDir = async () => {
  addDirDisabled.value = true
  addDirform.value.parentId = currentId.value
  if((props.mode == 1 && fileList.value.length > 3) || (props.mode == 3 && fileList.value.length > 1)){
    ElMessage({
      message: '创建文件夹层级过深',
      type: 'error'
    })
    return
  }
  addDirform.value.level = fileList.value.length
  if(props.mode == 1){
    const res = await addDirectory(addDirform.value)
  }
  if(props.mode == 3){
    const res = await fileMistakeFolderCreate(addDirform.value.folderName)
  }
  ElMessage({
      message: '创建文件夹成功',
      type: 'success'
  })
  addDirform.folderName = ''
  getAllFile()
  showAddDir.value = false
  addDirDisabled.value = false
}

const goToFile = async (file) => {
  currentId.value = file.id
  fileList.value.push(file.id)
  nameList.value.push(file.folderName || file.name)
  getAllFile()
}

const goBack = async () => {
  fileList.value.splice(fileList.value.length - 1,1)
  nameList.value.splice(nameList.value.length - 1,1)
  currentId.value = fileList.value[fileList.value.length - 1]
  getAllFile()
}

const router = useRouter()
//将预览变为异步，解决加载时间过长的问题
const preview = async (id) => {
  let res
  if(props.mode == 3){
    res = await fileMistakePreview(id)
  }else if(props.mode == 1){
    res = await previewFile(id)
  }else if(props.mode == 2){
    res = await fileSharePreview(id)
  }
  window.open(res.data.data,'_blank')
}

const download = async (id) => {
  try {
    const res = await downloadFile(id); // 返回 Blob 数据
    console.log('返回的下载数据: ', res);
    const blob = res.data;

    // 从响应头中获取文件名
    const disposition = res.headers['content-disposition'] || '';
    let fileName = 'downloaded_file';
    if (disposition.indexOf('filename=') !== -1) {
      const matches = disposition.match(/filename="?([^"]+)"?/);
      if (matches && matches.length > 1) {
        fileName = matches[1];
      }
    }
    console.log('文件名: ', fileName);

    // 创建 Blob 链接
    const url = window.URL.createObjectURL(blob);
    console.log('Blob URL: ', url);
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);
    link.click(); // 模拟点击下载
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  } catch (error) {
    // 如果返回的是 Blob 格式错误数据，则读取里面的 JSON 信息
    if (error.response && error.response.data instanceof Blob) {
      const reader = new FileReader();
      reader.onload = () => {
        try {
          const errObj = JSON.parse(reader.result);
          ElMessage.error(errObj.message || '下载失败');
        } catch (e) {
          ElMessage.error('下载失败');
        }
      };
      reader.readAsText(error.response.data);
    } else {
      console.error('下载失败:', error);
      ElMessage.error('下载失败');
    }
  }
}

const remove = async (file) => {
  if(props.mode == 1){
    if(file.type == 1){
      const res = await removeFile(file.id)
    }else{
      const res = await removeFolder(file.id)
    }
  }
  if(props.mode == 3){
    if(file.type == 1){
      const res = await fileMistakeFileRemove(file.id)
    }else{
      const res = await fileMistakeFolderRemove(file.id)
    }
  }
  if(props.mode == 4){
    const res = await fileRecycleRemove(file.id)
  }
  ElMessage.success('删除成功')
  getAllFile()
}

const onRename = (id) => {
  showRenameDir.value = true
  renameDirform.value.folderId = id
}

const showRenameDir = ref(false)
const renameDirform = ref({
  name: '',
  folderId: ''
})
const confirmRenameDir = async () => {
  const res = await renameFolder(renameDirform.value)
  showRenameDir.value = false
  getAllFile()
  renameDirform.value.name = ''
}

const currentFile = ref()
const showUpdateAuth = ref(false)
const isShare = ref(false)
const shareUser = ref([])
const onUpdateAuth = async (file) => {
  currentFile.value = file
  showUpdateAuth.value = true
  isShare.value = (file.isShare == 1)
  if(isShare.value){
    shareUser.value = (await fileShareUser(currentFile.value.type,currentFile.value.id)).data.data
  }
}
const auths = ref([
  [],["不公开","公开可预览","公开可下载"],["不公开","公开可预览","公开可下载"]
])
const authParam = ref()
const confirmAuth = async () => {
  if(authParam.value == undefined){
    ElMessage.error("请选择权限")
    return
  }
  if(currentFile.value.type == 1){
    const res = await authFile(currentFile.value.id,authParam.value)
  }else{
    const res = await authFolder(currentFile.value.id,authParam.value)
  }
  ElMessage.success("修改权限成功")
  showUpdateAuth.value = false
  files.value = await (await getFile(currentId.value)).data.data
  authParam.value = undefined
}
const showAddSharedUser = ref(false)
const changShareStatus = async () => {
  let form = {
    id: currentFile.value.id,
    isShare: isShare.value ? 1 : 0,
    type: currentFile.value.type
  }
  const res = await ChangeshareFile(form)
}
const searchKeyword = ref('')
const searchRes = ref([])
const searchUser = async () => {
  const res = await userSelectPhone(searchKeyword.value)
  searchRes.value = res.data.data
}
const addUserFromSearch = async (user) => {
  let form = {
    sharedUserId: user.id,
    type: currentFile.value.type,
    id: currentFile.value.id
  }
  const res = await fileShareAddUser(form)
  ElMessage.success("添加成功")
  shareUser.value = (await fileShareUser(currentFile.value.type,currentFile.value.id)).data.data
}
const removeSharedUser = async (user) => {
  let form = {
    sharedUserId: user.id,
    type: currentFile.value.type,
    id: currentFile.value.id
  }
  const res = await fileShareRemove(form)
  ElMessage.success('删除成功')
  shareUser.value = (await fileShareUser(currentFile.value.type,currentFile.value.id)).data.data
}

const clearRecycle = async () => {
  const res = await fileRecycleClear()
  ElMessage.success('清空回收站成功')
  getAllFile()
}

const findFile = async (file) => {
  const res = await fileRecycleFind(file.id)
  ElMessage.success('找回成功')
  getAllFile()
}

const showAiAnalyze = ref(false)
const onShowAiAnalyze = (file) => {
  currentFile.value = file
  showAiAnalyze.value = true
}
const loading = ref(false)
const analyzeKeyWord = ref('')
const resultHtml = ref()
const analyze = async () => {
  loading.value = true
  resultHtml.value = ''
  const res = (await aiAnalyze(analyzeKeyWord.value,currentFile.value.id)).data
  console.log(res);
  resultHtml.value = marked.parse(res.data)
  loading.value = false
}
</script>

<style scoped>
.file-container {
  position: relative;
  width: 1838px;
  height: 932px;
  background-image: url('@/assets/file/background.png');
}

.file-container .files-wrapper {
  width: 905px;
  height: 878px;
  position: absolute;
  top: 27px;
  left: 319px;
  background-image: url('@/assets/file/container.png');
}

.file-container .files-wrapper .el-breadcrumb {
  position: absolute;
  height: 18px;
  top: 211px;
  left: 104px;
  font-family: SimSun;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #8a5728 !important;
}

.file-container .files-wrapper .files {
  width: 847px;
  height: 585px;
  position: absolute;
  left: 28px;
  top: 262px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  align-content: flex-start;
}

.file-container .files-wrapper .files .file {
  width: 206px;
  height: 195px;
  position: relative;
}

.file-container .files-wrapper .files .file .file-icon {
  height: 119px;
  width: 131px;
  position: absolute;
  left: 40px;
  top: 20px;
}

.file-container .files-wrapper .files .file .file-name {
  position: absolute;
  height: 22px;
  font-family: SimSun;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #8a5728;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
}

.file-container .files-wrapper .add {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 200px;
  left: 725px;
}

.file-container .user-wrapper {
  width: 403px;
  height: 579px;
  position: absolute;
  top: 200px;
  left: 1320px;
  background-image: url('@/assets/file/user.png');
}

.file-container .user-wrapper .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: absolute;
  top: 107px;
  left: 149px;
}

.file-container .user-wrapper .username {
  height: 35px;
  font-family: SimSun;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #9f632c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
  top: 246px;
}

.file-container .user-wrapper .phone {
  height: 35px;
  font-family: SimSun;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #9f632c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
  top: 314px;
}

.file-container .user-wrapper .information {
  height: 35px;
  font-family: SimSun;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #9f632c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  top: 421px;
}

.ai-analyze-dialog {
    border-radius: 10px;
    /* 可根据整体主题设置背景色和阴影 */
    background-color: #fbe7bd;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}
.ai-analyze-input {
    width: 100%;
    font-size: 16px;
    font-family: SimSun;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
}
.ai-analyze-btn {
    margin-top: 10px;
    background-color: #9f632c;
    border-color: #9f632c;
    font-family: SimSun;
}
.ai-analyze-output {
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    padding: 10px;
    border-radius: 4px;
    background-color: #fff;
    color: #9f632c;
    font-size: 16px;
    font-family: SimSun;
}
.ai-analyze-loading {
    margin-top: 20px;
    text-align: center;
    font-family: SimSun;
    color: #9f632c;
}
.loading-text {
    margin-top: 5px;
}
.ai-analyze-empty {
    margin-top: 20px;
    text-align: center;
    font-family: SimSun;
    color: #9f632c;
}
</style>